<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vh的使用</title>
</head>
<body>
  <p>兼容性: IE9+</p>
	<section>窗口:
	  <p>window.innerWidth 网页视区宽度, 或称为浏览器内部可视区域大小. vw就是根据此值计算的</p>
	  <p>window.outerWidth 网页+工具栏(比如开发者工具)</p>
	  <p>screen.width 屏幕宽度, 在移动端, 会变成手机宽度</p>
	</section>
	<p data-height="265" data-theme-id="0" data-slug-hash="vgGmEW" data-default-tab="css,result" data-user="levy9527" data-embed-version="2" data-pen-title="vh" class="codepen">See the Pen <a href="http://codepen.io/levy9527/pen/vgGmEW/">vh</a> by levy (<a href="http://codepen.io/levy9527">@levy9527</a>) on <a href="http://codepen.io">CodePen</a>.</p>
	<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
	<p>参考资料: <a target="_blank" href="http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/">文章中的七、场景之：Office Word效果</a></p>
</body>
</html>

